<template>
  <div class="userlist-wrap">
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="5">
        <el-input clearable v-model="keyword" @keyup.enter.native="onSubmit" placeholder="请输入手机号或者订单号"></el-input>
      </el-col>
      <el-col :span="4">
        <el-select @change="selectChange" v-model="status" clearable placeholder="请选择订单状态">
          <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-button @click="onSubmit" type="primary" icon="el-icon-search">搜索</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" border style="width: 100%;margin: 20px 0" header-cell-class-name="table-header">
      <el-table-column prop="id" label="ID" width="60" align="center">
      </el-table-column>
      <el-table-column prop="out_trade_no" label="订单号" width="180" align="center">
      </el-table-column>
      <el-table-column prop="status_text" label="状态" align="center"></el-table-column>
      <el-table-column prop="total_fee" width="110" label="支付金额(元)" align="center"></el-table-column>
      <el-table-column prop="created_at" label="创建时间" align="center"></el-table-column>
      <el-table-column prop="user.name" label="支付用户" align="center"></el-table-column>
      <el-table-column prop="article.cate_gory.title" label="所属分类" align="center"></el-table-column>
      <el-table-column prop="article.title" width="120" label="购买商品" align="center"></el-table-column>
      <el-table-column prop="user.mobile" width="120" label="手机号码" align="center"></el-table-column>
      <el-table-column prop="remark" label="退款备注" align="center"></el-table-column>
      <el-table-column prop="refund_time" label="退款时间" align="center"></el-table-column>
      <el-table-column
              fixed="right" align="center"
              label="操作"
              width="180">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" v-if="scope.row.status === 1" type="primary" small="mini">完成订单</el-button>
          <el-button @click="handleClick(scope.row)" v-if="scope.row.status === 0" type="primary" disabled="" small="mini">未支付</el-button>
          <el-button @click="handleClick(scope.row)" v-if="scope.row.status === 3" type="primary" disabled="" small="mini">订单完成</el-button>
          <el-button @click="handleClick(scope.row)" v-if="scope.row.status === 4" type="primary" disabled="" small="mini">订单失效</el-button>
          <el-button
                  type="danger"
                  class="red"
                  @click="unfund(scope.$index, scope.row)">
            退款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.page"
            :page-size="query.limit"
            :total="query.total"
            @current-change="handlePageChange"
    ></el-pagination>

    <el-dialog
            title="退款"
            :visible.sync="dialogVisible"
            width="50%">
      <el-input
              type="textarea"
              :rows="5"
              placeholder="请输入退款备注" maxlength="200"
              v-model="textarea">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="btnFund">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'orderlist',
    data () {
      return {
        dialogVisible: false,

        selectId: '',
        closeOnClickModal: false,
        textarea: '',
        status: '',
        keyword: '',
        options: [
          {
            label: '未支付', value: 0
          },
          {
            label: '已支付', value: 1
          },
          {
            label: '订单完成', value: 3
          },
          {
            label: '订单失效', value: 4
          }
        ],
        checkList: [],
        tableData: [],
        query: {},
        page: 1,
        mobile: '',
      }
    },
    methods: {

      unfund(i, item) {
        console.log(i, item, 'kdkdk')
        this.selectId = item.id
        this.dialogVisible = true
      },
      btnFund() {
        if (this.textarea === '') {
          this.$message({
            showClose: true,
            message: '请输入退款备注...',
            type: 'warning'
          });
          return false
        }
        this.$http.put('/api/admin/refund/Order/' + this.selectId, {
          remark: this.textarea
        }).then(r=>{
          console.log(r, 'kdkdkdk开快定的')
          this.dialogVisible = false
        })
      },
      selectChange (item) {
        console.log(item ,"skdkfjskdjf ")
        this.page = 1
        this.fun()
      },
      handleClick (row) {
        this.$confirm('完成交易后状态不可再变更, 谨慎使用!', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.put('api/admin/order/Order/' + row.id).then(r => {
            console.log(r, '空开垦冻结和')
            this.fun()
            this.$message({
              type: 'success',
              message: '订单状态完成...'
            });
          })

        })
      },
      handlePageChange(d) {
        this.page = d
        this.fun()
      },
      onSubmit () {
        this.page = 1
        this.fun()
      },
      fun () {
        let params = {
          page: this.page,
          keyword: this.keyword,
          status: this.status
        }
        this.$http.get('/api/admin/order', {params}).then(r => {
          this.tableData = r.data.data.data.data
          this.tableData.forEach(item => {
            item.status_text = item.status === 0 ? '未支付' : item.status === 1 ? '已支付' : item.status === 3 ? '订单完成' : '订单失效'
          })
          this.query = r.data.data.meta
        })
      }
    },
    created () {
      this.keyword = this.$route.query.mobile
      this.fun()
    }
  }
</script>

<style scoped lang="less">
  .userlist-wrap{
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ddd;
    padding: 30px;
    box-sizing: border-box;
  }
</style>
<style>
  .table-header{
    font-weight: bold;
  }
</style>
